<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}LawInsight-法律数据智能分析一体化平台{% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'styles.css' %}">
    <!-- {% block extra_head %}{% endblock %}   自定义头部内容的区块 -->
</head>
<body>
    <div class="header-nav-container">
        <h1 class="system_name">LawInsight</h1>
        <nav>
            <ul>
                <li><a href="{% url 'index' %}">主页</a></li>
                <li><a href="{% url 'login' %}">登录</a></li>
                <li><a href="{% url 'register' %}">注册</a></li>
                <li><a href="{% url 'Tokenizer' %}">分词</a></li>
                <li><a href="{% url 'PosTagger' %}">词性识别</a></li>
                <li><a href="{% url 'segment' %}">词频分析报告</a></li>
                <li><a href="{% url 'entity_insight' %}">命名实体识别</a></li>
                <li><a href="{% url 'summarize' %}">摘要提取</a></li>
                <li><a href="{% url 'keywords' %}">关键词提取</a></li>
                <li><a href="{% url 'sentiment' %}">情感分析</a></li>
                <li><a href="{% url 'help' %}">帮助</a></li>
            </ul>
        </nav>
    </div>
    <div class="content-container">
        {% block content %}
        {% endblock %}
    </div>
</body>
<style>
    .header-nav-container {
        background-color: #333; /* 背景颜色 */
        color: white; /* 文字颜色 */
        padding: 0px; /* 内边距 */
        position: fixed; /* 固定定位 */
        top: 0; /* 顶部对齐 */
        left: 0; /* 左边对齐 */
        width: 200px; /* 设置宽度 */
        height: 100%; /* 高度填满整个页面 */
    }

    .system_name{
        margin: 0; /* 去除默认外边距 */
        padding: 2px 10px; /* 标题内边距 */
        text-align: center; /* 标题居中 */
        background-color: #191970; /* 标题背景色 */
        color: white; /* 标题文字颜色 */
        font-size: 24px; /* 设置标题字号 */
    }

    /* 导航栏样式 */
    nav {
        background-color: #191970;
        width: 200px; /* 设置导航栏宽度 */
        height: 100vh; /* 设置导航栏高度为视口高度 */
        position: fixed; /* 固定导航栏 */
        font-size: 16px;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
    }

    nav li {
        margin: 10px 0; /* 增加上下间距 */
        width: 180px; /* 设置宽度 */
    }

    nav a {
        display: block;
        padding: 10px;
        padding-left: 30px;
        color: white;
        text-align: left; /* 左对齐文本 */
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s, transform 0.2s;
        width: 100%; /* 链接宽度填满 */
    }

    nav li:hover {
        background-color: #4169E1;
        transform: scale(1.05);
    }

    nav li:active {
        transform: scale(0.95);
    }

    /* 内容区域样式 */
    .content-container {
        margin: 0;
        margin-left: 220px;
        padding-right: 40px;
        padding-left: 30px; /* 给内容区添加左边距，避免遮挡 */
    }
     body {
        background-color: #e7f1ff;
        margin: 0;
        padding: 0;
        height: 100%;
     }
</style>
</html>
